গ্রিড কন্টেইনার হল এমন একটি উপাদান যা display: grid; প্রোপার্টি ব্যবহার করে সক্রিয় করা হয়। এটি গ্রিড লেআউট তৈরি করে এবং তার ভিতরের চাইল্ড উপাদানগুলোকে (গ্রিড আইটেম) নির্ধারিত সারি এবং কলামের মধ্যে সাজায়।

কিভাবে গ্রিড কন্টেইনার তৈরি করবেন?

গ্রিড কন্টেইনার তৈরি করার জন্য প্রথমে একটি কন্টেইনার উপাদান নির্বাচন করতে হবে এবং সেটিতে display: grid; প্রোপার্টি প্রয়োগ করতে হবে। উদাহরণ:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid-container {
    display: grid;
  }
</style>

উপরের উদাহরণে .grid-container ক্লাসটি গ্রিড কন্টেইনার হিসেবে কাজ করবে, এবং .item ক্লাসগুলো গ্রিড আইটেম হিসেবে আচরণ করবে।

গ্রিড কন্টেইনারের প্রোপার্টি

grid-template-columns

গ্রিড কন্টেইনারের কলামের আকার নির্ধারণ করতে ব্যবহৃত হয়।

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* তিনটি কলামের আকার নির্ধারণ */
}

grid-template-rows

গ্রিড কন্টেইনারের সারির আকার নির্ধারণ করতে ব্যবহৃত হয়।

.grid-container {
  display: grid;
  grid-template-rows: 50px 150px; /* দুটি সারির আকার নির্ধারণ */
}

grid-gap

গ্রিড আইটেমগুলোর মধ্যে ফাঁকা নির্ধারণ করে। এটি দুইভাবে ব্যবহার করা যায়:

• row-gap (সারি ফাঁকা)
• column-gap (কলাম ফাঁকা)।

.grid-container {
  display: grid;
  grid-gap: 10px; /* সারি এবং কলামের মধ্যে 10px ফাঁকা */
}

justify-items

গ্রিড আইটেমের অনুভূমিক অ্যালাইনমেন্ট নির্ধারণ করতে ব্যবহৃত হয়। ভ্যালুসমূহ: start, end, center, এবং stretch।

.grid-container {
  display: grid;
  justify-items: center;
}

align-items

গ্রিড আইটেমের উল্লম্ব অ্যালাইনমেন্ট নির্ধারণ করতে ব্যবহৃত হয়। ভ্যালুসমূহ: start, end, center, এবং stretch।

.grid-container {
  display: grid;
  align-items: center;
}

justify-content

গ্রিডের সামগ্রিক অনুভূমিক অ্যালাইনমেন্ট নির্ধারণ করতে ব্যবহৃত হয়। ভ্যালুসমূহ: start, end, center, space-between, space-around, এবং space-evenly।

.grid-container {
  display: grid;
  justify-content: space-around;
}

align-content

গ্রিডের সামগ্রিক উল্লম্ব অ্যালাইনমেন্ট নির্ধারণ করতে ব্যবহৃত হয়।

.grid-container {
  display: grid;
  align-content: center;
}

উদাহরণ: একটি সাধারণ গ্রিড লেআউট

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* তিনটি কলাম */
    grid-template-rows: 100px 200px; /* দুটি সারি */
    grid-gap: 10px;
    justify-items: center;
    align-items: center;
  }

  .item {
    background: #ddd;
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

উপরের উদাহরণে গ্রিড কন্টেইনারটি তিনটি কলাম এবং দুটি সারি নিয়ে তৈরি হয়েছে। প্রতিটি গ্রিড আইটেম একটি নির্দিষ্ট জায়গায় অবস্থান করছে এবং কেন্দ্রবিন্দুতে অ্যালাইন করা হয়েছে।

কেন গ্রিড কন্টেইনার ব্যবহার করবেন?

1. লেআউট ব্যবস্থাপনা সহজতর: কলাম এবং সারি ভিত্তিক ডিজাইন সহজ করে।
2. রেস্পন্সিভ ডিজাইন: ব্রেকপয়েন্ট এবং ডাইনামিক কনটেন্ট ব্যবস্থাপনা সহজ হয়।
3. ডিজাইন নমনীয়তা: অ্যালাইনমেন্ট এবং ফাঁকা নির্ধারণের মাধ্যমে গ্রিড সহজেই কাস্টমাইজ করা যায়।
4. কোড সাশ্রয়ী: অন্যান্য লেআউট সিস্টেমের তুলনায় কম কোডে জটিল লেআউট তৈরি করা যায়।